<template>
    <div>
        <!-- 对数据操作  -->
        <div class="tool-rows">
            <el-input v-model="name" placeholder="请输入菜单名" class="table-input" suffix-icon="el-icon-user"></el-input>
            <el-button type="success" icon="el-icon-search" @click="load">搜索</el-button>
            <el-button type="warning" icon="el-icon-refresh-right" @click="reset">重置</el-button>
        </div>
        <div class="tool-rows">
            <el-button type="success" icon="el-icon-plus" @click="handleInsert">新增</el-button>
            <el-popconfirm
                    confirm-button-text='确定'
                    cancel-button-text='取消'
                    icon="el-icon-info"
                    icon-color="red"
                    @confirm="handleBatchDelete"
                    title="确定删除选中菜单吗?">
                <el-button type="danger" icon="el-icon-delete" slot="reference" style="margin: 0 10px">批量删除</el-button>
            </el-popconfirm>
        </div>

        <!-- 表单区域  -->
        <el-table :data="tableData"
                  row-key="id"
                  default-expand-all
                  :tree-props="{children: 'children'}"
                  header-cell-class-name="table-header"
                  border
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40">
            </el-table-column>
            <el-table-column prop="id" label="ID" width="85">
            </el-table-column>
            <el-table-column prop="name" label="菜单名称" width="120">
            </el-table-column>
            <el-table-column prop="path" label="路径">
            </el-table-column>
            <el-table-column prop="description" label="描述">
            </el-table-column>
            <el-table-column prop="icon" label="图标" align="center" width="85">
                <template slot-scope="scope">
                    <span :class="scope.row.icon" style="font-size: 25px"></span>
                </template>
            </el-table-column>
            <el-table-column prop="operation" label="操作" width="320" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" v-show="!scope.row.pid && !scope.row.path" @click="handleAddChildren(scope.row.id)">新增子菜单</el-button>
                    <el-button type="success" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-popconfirm
                            confirm-button-text='确认'
                            cancel-button-text='取消'
                            icon="el-icon-info"
                            icon-color="red"
                            @confirm="handleDelete(scope.row.id)"
                            title="确定删除该菜单吗?">
                        <el-button type="danger" icon="el-icon-delete" slot="reference" style="margin-left: 6px">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 菜单信息编辑   -->
        <el-dialog title="菜单信息" :visible.sync="dialogFormVisible" width="30%" custom-class="edit-dialog">
            <el-form :model="menuForm">
                <el-form-item label="菜单名称" label-width="80px">
                    <el-input v-model="menuForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="路径" label-width="80px">
                    <el-input v-model="menuForm.path" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述" label-width="80px">
                    <el-input v-model="menuForm.description" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图标" label-width="80px">
                    <el-select clearable v-model="menuForm.icon" placeholder="请选择图标" style="width: 100%;">
                        <el-option v-for="item in iconList" :key="item.id" :label="item.name" :value="item.value">
                            <i :class="item.value"></i> {{ item.name }}
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { serverIp, serverPort } from "../../public/config";

    export default {
        name: "Menu",
        data () {
            return {
                // 搜索字段
                name: '',
                // 表格数据
                tableData: [],
                // 用户编辑
                dialogFormVisible: false,
                menuForm: {},
                multipleSelection: [],
                // 图标列表
                iconList: []
            }
        },
        created () {
            this.load()
            this.loadIcons()
        },
        methods: {
            // 加载数据
            load () {
                this.request.get('/menu', this.name).then(res => {
                    this.tableData = res.data
                })
            },
            reset () {
                this.name = ''
                this.load()
            },
            //加载图标列表
            loadIcons () {
                this.request.get('/icon').then(res => {
                    this.iconList = res.data
                })
            },
            // 新增
            handleInsert () {
                this.menuForm = {}
                this.dialogFormVisible = true
            },
            // 新增子菜单
            handleAddChildren (pid) {
                this.menuForm = {}
                this.menuForm.pid = pid
                this.dialogFormVisible = true
            },
            // 编辑
            handleEdit (row) {
                this.menuForm = row
                this.dialogFormVisible = true
            },
            // 删除
            handleDelete (id) {
                this.request.delete('/menu/' + id).then(res => {
                    if (res.code === '200') {
                        this.$message.success('删除成功!')
                        this.load()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            handleBatchDelete () {
                let ids = this.multipleSelection.map(v => v.id)
                this.request.post('/menu/del/batch', ids).then(res => {
                    if (res.code === '200') {
                        this.$message.success('批量删除成功!')
                        this.load()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            save () {
                this.request.post('/menu', this.menuForm).then(res => {
                    if (res.code === '200') {
                        this.$message.success('保存成功!')
                        this.dialogFormVisible = false
                        this.load()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            handleSelectionChange (val) {
                this.multipleSelection = val
            },
        }
    }
</script>

<style scoped>
    div.tool-rows {
        margin: 16px 0;
    }
    .table-input{
        display: inline-block;
        margin-right: 15px;
        width: 200px;
    }
    /deep/ .table-header {
        background-color: #E4E4E4 !important;
    }
    /deep/ .edit-dialog {
        border-radius: 12px !important;
    }
</style>